<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title></title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
  <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
  <link rel="stylesheet" href="/static/mobile/css.css">
  <link rel="stylesheet" href="/static/mobile/iconfont.css">
  <style>
    .weui-tab__bd {
      padding: 10px;
    }

    .weui-tabbar__item.weui-bar__item--on .weui-tabbar__label,
    .weui-tabbar__item .weui-tabbar__label,
    .weui-tabbar__item i {
      color: #0000ff;
    }

    #footer {
      position: absolute;
      bottom: 0;
      width: 100%;
    }

    .banner {
      height: 149px;
      background: url("/static/mobile/images/my-banner2.png") no-repeat;
      width: 100%;
      background-size: 100% 100%;
      margin-bottom: 3px;
      position: relative;
    }

    .welcome {
      background-color: transparent;
      color: #ffffff;
      bottom: 5px;
      position: absolute;
      padding: 10px;
      text-shadow: 5px 2px 6px #000;
    }
  </style>
</head>
<body>
<section id="content">
  <div class="banner" v-show="bannerShow">
    <div class="welcome">
      欢迎来到扬州大学化学化工学院实验室安全学习系统，请登录。
    </div>
  </div>
  <div style="height: 10px;background-color: #bfcdda"></div>
  <div class="weui-cells weui-cells_form">
    <div class="weui-cell">
      <div class="weui-cell__hd"><label class="weui-label">一卡通</label></div>
      <div class="weui-cell__bd">
        <input class="weui-input" name="form[username]" v-on:focus="inputFocus" v-on:blur="inputBlur"
               type="text" v-model="username" placeholder="请输入一卡通号">
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd"><label class="weui-label">密&nbsp;&nbsp;&nbsp;码</label></div>
      <div class="weui-cell__bd">
        <input class="weui-input" type="password" v-on:focus="inputFocus" v-on:blur="inputBlur"
               name="form[password]" v-model="password" placeholder="密码">
      </div>
    </div>
    <div class="weui-cell">
      <button class="weui-btn weui-btn_primary" @click="login">登录</button>
    </div>
  </div>

  <div id="footer"></div>

</section>


<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.2.1/vue.min.js"></script>
<script src="/static/mobile/main.js"></script>

<script>
  var content = new Vue({
    el: "#content",
    data: {
      username: localStorage.getItem('username'),
      password: localStorage.getItem('password'),
      bannerShow: true,
    },
    created: function () {

    },
    watch: {},
    methods: {
      login: function () {
        var username = this.username, password = this.password;
        localStorage.setItem('username', username);
        localStorage.setItem('password', password);
        js_request('/portal/login', {"form[username]": username, "form[password]": password}, function (result) {
          if (result.code == 1) {
            localStorage.setItem('realname', result.data.userinfo.realname)
            window.location.href = "my.html";
          } else {
            js_alert(result.msg);
          }
        });
      },
    },
  });

</script>
</body>
</html>